<template>
    <div class="songlistd" v-loading="thedata==''">
      <el-scrollbar>
        <div class="songdetail"  v-if="thedata!=''">
          <div class="detail-header">
            <div class="title">{{title}}</div>
            <div class="detail-header-info">
              <div class="detail-header-info-img">
                <img v-lazy="thedata.coverImgUrl">
                <div class="playcount"><i class="el-icon-headset"></i>{{thedata.playCount | filterPlayCount}}</div>
              </div>
              <div class="detail-header-info-content">
                <div class="detail-music-name">{{thedata.name}}</div>
                <div class="detail-music-user">
                  <span><img v-lazy="thedata.creator.avatarUrl">{{thedata.creator.nickname}}</span>
                  <span>2019-10-10 创建</span>
                </div>
                <div class="detail-music-operation">
                  <span class="operation-collection"><i class="el-icon-folder-add"></i>收藏({{thedata.subscribedCount}})</span>
                  <span class="operation-message"><i class="el-icon-chat-dot-square"></i>评论({{thedata.commentCount}})</span>
                  <span class="operation-share"><i class="el-icon-position"></i>分享({{thedata.shareCount}})</span>
                  <span class="operation-download"><i class="el-icon-download"></i>下载全部</span>
                  <span class="operation-more">
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <i class="el-icon-more"></i>更多
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item disabled>删除下载文件</el-dropdown-item>
                        <el-dropdown-item>固定到开始屏幕</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </div>
                <p>标签：<span v-for="(tag,index) in thedata.tags" :key="index">{{tag}} <i v-show='index!=thedata.tags.length-1'>/</i>&nbsp;</span></p>
                <p>介绍：<span>{{thedata.description}}</span></p>
              </div>
            </div>
          </div>

          <div class="detail-main">
            <div class="detail-main-header">
              <div class="detail-main-header-left">
                <div><i class="el-icon-video-play"></i>播放全部({{thedata.tracks.length}})</div>
                <div></div>
                <div><i class="el-icon-finished"></i>选择</div>
              </div>
              <div class="detail-main-header-right">
                <el-input placeholder="搜索歌单歌曲" suffix-icon="el-icon-search" v-model="detailsearch" clearable></el-input>
              </div>
            </div>
            <div class="detail-main-container">
              <ul>
                <li class="detail-music-list" v-for="(item,index) in thedata.tracks" :key="index">
                  <div class="music-list-index">{{index+1 | filterNumber}}</div>
                  <div class="music-list-detail"><i class="el-icon-star-off"></i></div>
                  <div class="music-list-song">{{item.name}}</div>
                  <div class="music-list-singer ellipsis"><span v-for="(sing,index) in item.ar" :key="index">{{sing.name}}<i v-show='index!=item.ar.length-1'>/</i>&nbsp;</span></div>
                  <div class="music-list-album ellipsis"><p class="ellipsis">{{item.al.name}}</p></div>
                  <div class="music-list-time">{{item.dt | filterTime}}</div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </el-scrollbar>
    </div>
</template>
<script>
  import {getSongListDetail} from '@/api/api'
  export default{
    data(){
      return{
        id: 0,
        title: '歌单',
        detailsearch: '',
        thedata:[],
      }
    },
    activated(){
      this.thedata = [];
      this.id = this.$route.query.id;
      getSongListDetail(this.id).then(res=>{
        if(res.status == 200){
          this.thedata = res.data.playlist;
          // console.log(this.thedata);
        }
      })
    },
  }
</script>
<style scoped="scoped">
  .songlistd{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  }
  .songdetail .title {
    line-height: 52px;
    color: #666666;
  }

  .detail-header {
    width: 100%;
    /* height: 250px; */
    height: auto;
    padding: 0px 28px;
    background: linear-gradient(#ccc 1%, #fafafc 99%);
    position: relative;
  }

  .title {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    color: #666;
    font-weight: 600;
    font-size: 12px;
  }

  .detail-header-info {
    width: 100%;
    /* height: 198px; */
    height: auto;
    display: flex;
  }

  .detail-header-info-img {
    width: 198px;
    height: 198px;
    overflow: hidden;
    position: relative;
  }

  .detail-header-info-img>img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .detail-header-info-img>span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    left: 0;
    top: 0;
  }

  .detail-header-info-img>i {
    position: absolute;
    text-align: center;
    font-size: 135px;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }

  .detail-header-info-img>.playcount {
    width: 100%;
    height: 18px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    z-index: 10;
    text-align: right;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    padding: 0px 6px;
  }

  .detail-header-info-img>.playcount>i {
    margin-right: 5px;
  }

  .detail-header-info-content {
    flex: 1;
    height: 100%;
    padding-left: 20px;
    overflow: hidden;
  }
  .detail-header-info-content>p{
    font-size: 12px;
    line-height: 26px;
  }
  .detail-header-info-content>p:nth-of-type(1)>span{
    color: #1A5A99;
  }
  .detail-header-info-content>p:nth-of-type(2)>span{
    color: #999;
  }

  .detail-header-info-content>div {
    margin-bottom: 10px;
  }

  .detail-header-info-content .detail-music-name {
    width: 100%;
    font-size: 20px;
    color: #000;
  }

  .detail-header-info-content .detail-music-user {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .detail-header-info-content .detail-music-user>span {
    color: #666;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-right: 15px;
  }

  .detail-header-info-content .detail-music-user>span>img {
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 10px;
    border-radius: 50%;
  }

  .detail-header-info-content .detail-music-operation {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .detail-header-info-content .detail-music-operation>span {
    display: flex;
    align-items: center;
    border: 1px solid #c7c7ca;
    background-color: #f1f1f1;
    padding: 5px 8px;
    font-size: 12px;
    margin-right: 8px;
  }

  .detail-header-info-content .detail-music-operation>span>i {
    font-size: 16px;
    margin-right: 5px;
    color: #999999;
  }

  >>>.el-icon-more {
    margin-right: 5px;
  }

  >>>.el-dropdown-menu__item:hover {
    color: #B32A2B;
    background-color: #e6e6e6;
  }

  .detail-main {
    width: 100%;
    height: auto;
    padding: 10px 28px 0px 28px;
  }

  .detail-main .detail-main-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: #FAFAFC;
  }

  .detail-main-header .detail-main-header-left {
    padding: 0px 12px;
    display: flex;
    align-items: center;
  }

  .detail-main-header .detail-main-header-left div {
    margin-right: 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
  }

  .detail-main-header .detail-main-header-left div:nth-of-type(2) {
    border-right: 1px solid #E4E4E7;
    width: 1px;
    height: 16px;
    margin-right: 10px;
    margin-left: 5px;
  }

  .detail-main-header .detail-main-header-left div>i {
    font-size: 20px;
    color: #333;
    margin-right: 5px;
  }

  .detail-main-header .detail-main-header-left div:nth-of-type(1)>i {
    color: #DF3B3B;
  }

  .detail-main-header .detail-main-header-right {
    display: flex;
    align-items: center;
  }

  >>>.el-input__inner {
    width: 176px;
    height: 32px;
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid #E4E4E7;
  }

  >>>.el-input__icon {
    line-height: 32px;
  }


  .detail-main .detail-main-container {
    width: 100%;
    height: auto;
  }

  .detail-main-container ul li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0px 12px;
  }

  .detail-main-container ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .detail-main-container ul li:hover {
    background-color: #F2F2F3;
  }

  .detail-main-container ul li div {
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 100%;
  }

  .detail-main-container ul li .music-list-index {
    width: 36px;
    justify-content: center;
    font-size: 13px;
  }

  .detail-main-container ul li .music-list-detail {
    width: 28px;
    height: 100%;
    color: #999;
    font-size: 16px;
  }

  .detail-main-container ul li .music-list-song {
    flex: 1;
    font-size: 14px;
  }

  .detail-main-container ul li .music-list-singer {
    flex: 0.8;
    color: #999999;
  }

  .detail-main-container ul li .music-list-album {
    flex: 0.5;
    color: #999999;
    padding-right: 20px;
  }

  .detail-main-container ul li .music-list-time {
    flex: 0.2;
    color: #999999;
  }

</style>
